<template>
  <div class="particle-background">
    <canvas ref="canvasRef" class="particle-canvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const canvasRef = ref<HTMLCanvasElement>()
let animationId: number | null = null

interface Particle {
  x: number
  y: number
  z: number
  vx: number
  vy: number
  vz: number
  size: number
  color: string
  alpha: number
}

const particles: Particle[] = []
const colors = ['#ff006e', '#8338ec', '#3a86ff', '#06ffa5', '#ffbe0b', '#fb5607']

const createParticles = (canvas: HTMLCanvasElement) => {
  const particleCount = 100
  
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      z: Math.random() * 1000,
      vx: (Math.random() - 0.5) * 2,
      vy: (Math.random() - 0.5) * 2,
      vz: Math.random() * 5 + 1,
      size: Math.random() * 3 + 1,
      color: colors[Math.floor(Math.random() * colors.length)],
      alpha: Math.random() * 0.8 + 0.2
    })
  }
}

const updateParticles = (canvas: HTMLCanvasElement) => {
  particles.forEach(particle => {
    particle.x += particle.vx
    particle.y += particle.vy
    particle.z -= particle.vz
    
    // 粒子回收
    if (particle.z <= 0) {
      particle.z = 1000
      particle.x = Math.random() * canvas.width
      particle.y = Math.random() * canvas.height
    }
    
    // 边界处理
    if (particle.x < 0 || particle.x > canvas.width) {
      particle.vx *= -1
    }
    if (particle.y < 0 || particle.y > canvas.height) {
      particle.vy *= -1
    }
  })
}

const drawParticles = (ctx: CanvasRenderingContext2D) => {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  
  particles.forEach(particle => {
    const scale = 1000 / (1000 - particle.z)
    const x = particle.x * scale
    const y = particle.y * scale
    const size = particle.size * scale
    
    // 绘制粒子
    ctx.save()
    ctx.globalAlpha = particle.alpha * (1 - particle.z / 1000)
    ctx.fillStyle = particle.color
    ctx.beginPath()
    ctx.arc(x, y, size, 0, Math.PI * 2)
    ctx.fill()
    
    // 添加发光效果
    ctx.shadowBlur = 20
    ctx.shadowColor = particle.color
    ctx.fill()
    
    ctx.restore()
  })
  
  // 绘制连接线
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'
  ctx.lineWidth = 1
  
  for (let i = 0; i < particles.length; i++) {
    for (let j = i + 1; j < particles.length; j++) {
      const dx = particles[i].x - particles[j].x
      const dy = particles[i].y - particles[j].y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      if (distance < 100) {
        ctx.beginPath()
        ctx.moveTo(particles[i].x, particles[i].y)
        ctx.lineTo(particles[j].x, particles[j].y)
        ctx.globalAlpha = (100 - distance) / 100 * 0.5
        ctx.stroke()
      }
    }
  }
}

const animate = () => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  if (!ctx) return
  
  updateParticles(canvas)
  drawParticles(ctx)
  
  animationId = requestAnimationFrame(animate)
}

const resizeCanvas = () => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
}

onMounted(() => {
  const canvas = canvasRef.value
  if (!canvas) return
  
  resizeCanvas()
  createParticles(canvas)
  animate()
  
  window.addEventListener('resize', resizeCanvas)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', resizeCanvas)
})
</script>

<style scoped>
.particle-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  pointer-events: none;
  opacity: 0.6;
}

.particle-canvas {
  width: 100%;
  height: 100%;
  background: transparent;
}
</style> 